<template>
  <div class="tw-timeline" ref="listContent" :style="{backgroundColor: bgColor}">
    <vue-seamless-scroll
      v-if="dataList.length>0"
      :data="dataList"
      :class-option="classOption"
      @ScrollEnd="toBreakList"
      class="seamless-warp tw-timeline-list"
    >
      <div class="timeline-item"  ref="test1" v-for="(item, index) in dataList" :key="index">
        <div class="timeline-icon">
        </div>
        <div class="timeline-content" style="padding-right: 95px">
          <div class="xheader">
            <div class="xtitle">{{item.title}}</div>
            <div style="padding-left:10px" class="xsubtitle">{{item.subtitle}}</div>
          </div>
          <div class="xcontent">{{item.content}}</div>
          <div class="xtips" :style="{color: xtipsColor, fontSize: xtipsSize}">{{item.xtips}}</div>
        </div>
      </div>
    </vue-seamless-scroll>
    <div class="tw-noData" v-else>今日暂无受理事项</div>
  </div>
</template>

<script>
import scroll from 'vue-seamless-scroll'
window.Vue.use(scroll)

const props = require('./props')

export default {
  name: 'web-timeline',

  props,

  data() {
    return {
      interval: null,
      contentHeight: 0,
      scrollHeight: 0,
      bigData: [],
      dataList: []
    }
  },

  computed: {
    classOption () {
      return {
        // direction: 0
        limitMoveNum: this.limitNum,
        step: this.step
      }
    },

    style () {
      return {
        overflow: this.overflow,
        lineWidth: this.lineWidth,
        listWidth: this.listWidth,
        linecolor: this.linecolor,
        itemWidth: this.itemWidth,
        itemHeight: this.itemHeight,
        imgWidth: this.imgWidth,
        marginTop: this.marginTop,
        titleFontSize: this.titleFontSize,
        titlecolor: this.titlecolor,
        subtitleFontSize: this.subtitleFontSize,
        subtitlecolor: this.subtitlecolor,
        contentFontSize: this.contentFontSize,
        contentNum: this.contentNum,
        contentcolor: this.contentcolor,
        bgImg: this.bgImg,
        scrollbarWidth: this.scrollbarWidth,
        scrollbarBgc: this.scrollbarBgc,
        thumbBgc: this.thumbBgc,
        iconBgColor: this.iconBgColor,
        limitNum: this.limitNum,
        listHeight: this.listHeight,
        step: this.step,
        noDataColor: this.noDataColor,
        noDataColorBd: this.noDataColorBd,
        noDataSize: this.noDataSize,
        navItemColor: this.navItemColor,
        navItemPadding: this.navItemPadding,
        navItemRadius: this.navItemRadius,
        bgImgWidth: this.bgImgWidth,
        bgImgHeight: this.bgImgHeight,
        contentWeight: this.contentWeight,
        xtipsColor: this.xtipsColor,
        xtipsSize: this.xtipsSize
      }
    },
    postParams () {
      return {
        intervalTime: this.intervalTime,
        postUrl: this.postUrl
      }
    }
  },

  methods: {
    // 轮播一轮结束后回调事件
    toBreakList () {
      // this.getTableData()
    },

    setStyle () {
      const imagewidth = Math.round(parseInt(this.imgWidth) / 2) - 1
      let style = `
        ::root.tw-timeline {
          overflow-y:  ${this.overflow};
        }
        ::root.tw-timeline::-webkit-scrollbar {
          width: ${this.scrollbarWidth};
          background-color: ${this.scrollbarBgc};
        }
        ::root.tw-timeline::-webkit-scrollbar-thumb {
          background-color: ${this.thumbBgc};
          border-radius: 4px;
        }
        ::root.tw-timeline .tw-timeline-list {
          width:  ${this.listWidth};
          height: ${this.listHeight};
          margin: ${this.marginWidth} auto;
        }
        ::root.tw-timeline .tw-timeline-list::before {
          width:  ${this.lineWidth};
          background: ${this.linecolor};
        }

        ::root.tw-timeline .tw-timeline-list .timeline-item {
          margin-bottom:  ${this.itemHeight};
        }

        ::root.tw-timeline .tw-timeline-list .timeline-icon {
          background:  ${this.labelcolor};
          margin-left: ${imagewidth};
          width: ${this.imgWidth};
          height: ${this.imgWidth};
        }
        ::root.tw-timeline .tw-timeline-list .timeline-icon img {
          width: ${this.imgWidth};
          height: ${this.imgWidth};
        }

        ::root.tw-timeline .tw-timeline-list .timeline-content {
          margin-left: ${this.itemWidth};
        }

        ::root.tw-timeline .tw-timeline-list .timeline-content .xtitle {
          font-size: ${this.titleFontSize};
          color: ${this.titlecolor};
        }
        ::root.tw-timeline .tw-timeline-list .timeline-content .xsubtitle {
          font-size: ${this.subtitleFontSize};
          color: ${this.subtitlecolor};
        }
        ::root.tw-timeline .tw-timeline-list .timeline-content .xcontent {
          margin-top: ${this.marginTop};
          font-size: ${this.contentFontSize};
          color: ${this.contentcolor};
          -webkit-line-clamp: ${this.contentNum};
        }

        ::root.tw-timeline .tw-timeline-list .timeline-item .timeline-icon {
          background-color: ${this.iconBgColor};
        }

        ::root.tw-timeline .tw-noData {
          color: ${this.noDataColor};
          border: 1px solid ${this.noDataColorBd};
          font-size: ${this.noDataSize}
        }

        ::root.tw-timeline .timeline-content {
          background-color: ${this.navItemColor};
          padding: ${this.navItemPadding};
          border-radius: ${this.navItemRadius};
        }

        ::root.tw-timeline .tw-timeline-list .timeline-icon {
          width: ${this.bgImgWidth};
          height: ${this.bgImgHeight};
        }

        .tw-timeline-list .timeline-content .xtitle,
        .tw-timeline-list .timeline-content .xsubtitle {
          font-weight: ${this.contentWeight}
        }
      `

      if (this.bgImg[0]) {
        style += `
          ::root.tw-timeline .tw-timeline-list .timeline-icon {
            background-image: url(${this.$twApp.fileBaseUrl}${this.bgImg[0].localPath});
          }
        `
      }
      this.addStyle(style)
    },

    addStyle (style) {
      this.$el.classList.add(`x${this._uid}`)
      const styleEl = document.getElementById(this._uid) || document.createElement('style')
      styleEl.id = this._uid
      styleEl.innerText = style.replace(/::root/gm, `.x${this._uid}`).replace(/\n/gm, '')

      document.head.appendChild(styleEl)
    },

    getTableData () {
      // const path = `${'http://192.168.102.109:19000' + this.postUrl}`
      if (this.postUrl) { // 存在调用接口地址
        const path = `${window.$twApp.gateway + this.postUrl}`
        window.axios.post(path, {})
          .then(resp => {
            console.log(resp)
            if (resp && resp.data.pageInfo.list.length > 0) {
              const curtData = []
              resp.data.pageInfo.list.forEach((item, index) => {
                let list = {}
                if (index < 5) {
                  list = {
                    title: item.slsj || '受理时间',
                    subtitle: item.qd,
                    content: item.item_nrzy || '内容摘要',
                    xtips: ''
                  }
                  curtData.push(list)
                }
              })
              this.dataList = curtData
              if (this.intervalTime && this.intervalTime !== '') {
                setTimeout(this.getTableData, this.intervalTime * 1000)
              }
            } else {
              if (this.intervalTime && this.intervalTime !== '') {
                setTimeout(this.getTableData, this.intervalTime * 1000)
              }
            }
          })
          .catch(err => {
            console.log(err)
            if (this.intervalTime && this.intervalTime !== '') {
              setTimeout(this.getTableData, 10000)
            }
          })
      }
    }
  },

  mounted () {
    this.setStyle()
    this.getTableData()
  },

  created () {
    window.aa = this
  },

  beforeDestroy () {
    clearInterval(this.interval)
    this.interval = null
  },

  watch: {
    style: {
      deep: true,
      handler () {
        this.setStyle()
      }
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>

<style lang="scss" scoped>
    .seamless-warp {
        height: 229px;
        overflow: hidden;
    }
</style>
